<template>
  <!-- 支付页面 -->
  <div class="pay-page">
    <!-- 导航栏 -->
    <van-nav-bar title="确认订单信息" left-arrow @click-left="back()" />
    <!-- body -->
    <div class="body">
      <!-- 购书订单 -->
      <section class="book-list">
        <div class="header-wrapper">
          <span class="title">购书清单</span>
        </div>
        <div class="content">
          <div class="pay-item" v-for="p in payData" :key="p.bookId">
            <img
              :src="`https://file.ituring.com.cn/SmallCover/${p.cover}`"
              :alt="p.bookName"
            />
            <div class="item-main">
              <p class="book-name">{{ p.bookName }}</p>
              <p class="book-type">电子书</p>
              <p class="price">
                {{ p.bestPrice }}
                <span class="num">x{{ p.quantity }}</span>
              </p>
            </div>
          </div>
        </div>
      </section>
      <!-- 优惠码及银子 -->
      <section class="promo">
        <div class="header-wrapper">
          <span class="title">优惠码及银子</span>
        </div>
        <!-- 1 -->
        <div class="promo-item">
          <p class="tip">请选择或输入优惠码</p>
          <div class="box">
            <input type="text" placeholder="请输入优惠码" />
            <div class="use">
              <p>优惠码优惠: <span>0 元</span></p>
              <div class="btn">使用优惠码</div>
            </div>
          </div>
        </div>
        <!-- 2 -->
        <div class="promo-item">
          <p class="tip">拥有银子0.00两,可用0两</p>
          <div class="box">
            <input type="text" placeholder="请输入优惠码" />
            <div class="use">
              <p>银子优惠: <span>0 元</span></p>
              <div class="btn">使用银子</div>
            </div>
          </div>
        </div>
      </section>
      <!-- total -->
      <section class="total">
        <header>
          <span>合计</span>
          <p>{{ priceSun }}元</p>
        </header>

        <div>
          <span>图书总价</span>
          <p>{{ priceSun }}元</p>
        </div>
        <div>
          <span>图书折扣</span>
          <p>0元</p>
        </div>
        <div>
          <span>优惠码优惠</span>
          <p>0元</p>
        </div>
        <div>
          <span>银子优惠</span>
          <p>0元</p>
        </div>
        <div>
          <span>赠送银子</span>
          <p>0两</p>
        </div>
        <div>
          <span>运费</span>
          <p>0元</p>
        </div>
      </section>
      <!--  -->
      <div class="required-reading" @click="$router.push('/article/468172')">
        购前必读
      </div>
    </div>
    <!--  -->
    <footer>
      <p class="price">应付: {{ priceSun }} 元</p>
      <div class="btn" @click="toFinish">确认下单</div>
    </footer>
  </div>
</template>

<script>
import { CheckoutAPI } from "@/apis";
export default {
  computed: {
    // 从缓存中取出数据
    payData() {
      return JSON.parse(localStorage.checkList);
    },
    // 总价
    priceSun() {
      let sun = 0;
      this.payData.forEach((element) => {
        sun += element.bestPrice;
      });
      return sun.toFixed(2);
    },
  },
  mounted() {
    this.upData()
  },
  methods: {
    // post 当前数据
    upData() {
      // 网络请求
      this.$http.post(
      '/api/Cart',
        {
          cartItems: JSON.parse(localStorage.checkList)
        },
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
    },
    // 去到订单页
    toFinish() {
      // 网络请求
      this.$http.post(
        CheckoutAPI,
        {
          addressId: 0,
          agreed: true, // import
          cartItems: JSON.parse(localStorage.checkList), // import
          totalDiscountedPrice: 0,
          totalReturnedPoints: 0,
          totalToPay : this.priceSun,
        },
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );

      // 路由跳转
      this.$router.push({
        name: "finish",
        params: {
          id: this.priceSun,
        },
      });
    },
    // 回退
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-page {
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    padding: 2px 0;
  }
  .body {
    padding: 50px 0;
    background: #fff;
    div.header-wrapper {
      box-sizing: border-box;
      padding: 5px 15px;
      span.title {
        color: var(--more-font-grey);
        font-size: 14px;
        line-height: 20px;
      }
    }
    section.book-list {
      div.content {
        .pay-item {
          display: flex;
          padding: 15px;
          img {
            width: 54px;
            height: 74px;
            margin-right: 15px;
          }
          .item-main {
            font-size: 14px;
            .book-name {
              line-height: 20px;
              color: var(--book-name-font-black);
            }
            .book-type {
              line-height: 16px;
              color: var(--more-font-grey);
              margin-top: 5px;
            }
            .price {
              font-weight: bold;
              line-height: 23.3px;
              color: var(--book-name-font-black);
              .num {
                font-weight: normal;
                color: var(--more-font-grey);
              }
            }
          }
        }
      }
    }
    section.promo {
      padding: 0 15px;
      .header-wrapper {
        padding: 5px 0;
      }
      .promo-item {
        margin-top: 15px;
        .tip {
          line-height: 19px;
          font-size: 14px;
          color: var(--book-name-font-black);
        }
        .box {
          margin-top: 10px;
          padding: 10px;
          border: 1px solid #eee;
          input {
            line-height: 16px;
            font-size: 14px;
            margin: 0;
            padding: 5px 0;
            border: none;
            outline: none;
          }
          .use {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eee;
            p {
              font-size: 14px;
              line-height: 19px;
              color: var(--more-font-grey);
              span {
                color: var(--tag-font-orange);
              }
            }
            .btn {
              color: #fff;
              font-size: 14px;
              background-color: var(--theme-blue);
              padding: 10px 15px;
              border-radius: 30px;
            }
          }
        }
      }
    }
    section.total {
      box-sizing: border-box;
      margin: 10px 15px;
      background-color: var(--tag-bg-orange);
      border: 1px solid var(--tag-font-orange);
      header {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        background-color: var(--tag-font-orange);
        line-height: 20px;
        color: #fff;
        span {
          font-size: 14px;
        }
        p {
          font-size: 16px;
        }
      }
      div {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        line-height: 20px;
        margin-top: 5px;
        padding: 5px 15px;
        span {
          color: var(--more-font-grey);
        }
        p {
          color: var(--tag-font-orange);
        }
      }
    }
    .required-reading {
      padding: 0 15px 15px;
      color: var(--theme-blue);
      font-size: 14px;
      line-height: 25px;
      text-decoration: underline;
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .price {
      padding-left: 15px;
      font-size: 14px;
      line-height: 25px;
      color: var(--book-name-font-black);
    }
    .btn {
      background-color: var(--theme-blue);
      color: #fff;
      padding: 15px 25px;
    }
  }
}
</style>